<template>
	<el-drawer v-model="isDrawerVisible" title="书籍详情" :with-header="true">
	    <el-descriptions direction="vertical" :column="3" size="large" border>
			<el-descriptions-item label="书籍ID">{{book.id}}</el-descriptions-item>
			<el-descriptions-item label="书名">{{book.name}}</el-descriptions-item>
			<el-descriptions-item label="作者">{{book.author}}</el-descriptions-item>
			<el-descriptions-item label="出版日期">{{book.date}}</el-descriptions-item>
			<el-descriptions-item label="出版社">{{book.press}}</el-descriptions-item>
			<el-descriptions-item label="价格">{{book.price}}</el-descriptions-item>
			<el-descriptions-item label="状态">{{ book.state == 1 ?'在馆':"已借出"}}</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const book = ref({
	id: '',
	name: '',
	author: '',
	date: '',
	press: '',
	price: '',
	state: ''
});

// 接收父组件传递过来的 对象 数据
const handleDetailData = (obj) => {
	isDrawerVisible.value = true;
	book.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
	handleDetailData
})
</script>

<style scoped>
</style>